<mat-card class="page-title">
    <span>我的任务</span>

    <div class="btn-toolbar float-right" role="toolbar" id="divDesktop">
        <button mat-icon-button (click)="refresh()" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card>
    <mat-form-field >
        <mat-select [(ngModel)]="searchTaskStatus" (selectionChange)="refresh()">
            <mat-option value="all">
                全部
            </mat-option>
            <mat-option value="等待调度">
                等待调度
            </mat-option>
            <mat-option value="正在执行">
                正在执行
            </mat-option>
            <mat-option value="成功">
                成功
            </mat-option>
            <mat-option value="失败">
                失败
            </mat-option>
        </mat-select>
    </mat-form-field>

    <div *ngIf="tasks">
        <mat-card *ngFor="let task of tasks; trackBy: trackIdentity" style="font-size: 14px; margin: 20px 0; background-color: #fafafa">
            <a (click)="viewTaskDetails(task)">
                <div class="row">
                    <div class="col-md-3">
                        <span style="font-size: 20px">
                            {{task.taskName}}
                        </span>
                        <br>
                        <span>{{task.taskType}}</span>
                    </div>
                    <div class="col-md-2">
                        <span *ngIf="task.taskStatus === '等待调度'" style="color: grey">{{task.taskStatus}}</span>
                        <span *ngIf="task.taskStatus === '正在执行'" style="color: blue">{{task.taskStatus}}</span>
                        <span *ngIf="task.taskStatus === '成功'" style="color: green">{{task.taskStatus}}</span>
                        <span *ngIf="task.taskStatus === '失败'" style="color: red">{{task.taskStatus}}</span>
                        <br>
                        <span>{{task.taskProgress}}%</span>
                    </div>
                    <div class="col-md-7">
                        <span> {{task.description}}</span>
                        <br>
                        <span>
                        {{task.startDate | date:'yyyy-MM-dd HH:mm:ss'}} —— {{task.endDate | date:'yyyy-MM-dd HH:mm:ss'}}
                    </span>
                    </div>
                </div>
            </a>
        </mat-card>
    </div>

    <br>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>
